<template>
    <div id="app">
        <div class="menu_box">
            <div v-for="(item,index) in itemList" :key="index" :id="item.className" class="menu_box_item">
                <router-link :to="item.paths">
                    <div class="img">
                        <img :src="item.paths === $route.path ? item.img01 : item.img02" alt="">
                    </div>
                    <div :style="item.paths === $route.path ? {color:'#11b57c'} : {color:'#8d8a8a'}" class="text">{{item.text}}</div>
                </router-link>
            </div>
            <!-- 购物车数量 -->
            <div class="carNum">{{$store.state.carNum}}</div>
        </div>
    </div>
</template>

<script>

export default({
    data(){
        return{
            itemList:[
                {
                    className:"pages_home",
                    img01:'https://i.loli.net/2021/06/03/HzA1SUOQixX49hL.png',
                    img02:'https://i.loli.net/2021/06/03/E9pu1nLygWMDXVz.png',
                    paths:'/',
                    text:'首页'
                },
                {
                    className:"pages_sort",
                    img01:'https://i.loli.net/2021/06/03/zkbJywUQW2RHuKi.png',
                    img02:'https://i.loli.net/2021/06/03/aYgy7ZLVBP8H6K4.png',
                    paths:'/category',
                    text:'分类'
                },
                {
                    className:"pages_car",
                    img01:"https://i.loli.net/2021/06/03/tSXKcsylPYpaQzE.png",
                    img02:"https://i.loli.net/2021/06/03/i2L6mUEyzFT7jea.png",
                    paths:'/cart',
                    text:'购物车'
                },
                {
                    className:"pages_my",
                    img01:"https://i.loli.net/2021/06/03/TQH1YF4Md2nsaKE.png",
                    img02:"https://i.loli.net/2021/06/03/4HmEB7OyQud1oSW.png",
                    paths:'/my',
                    text:'我的'
                }
            ]
        }
    },
    methods:{

    },
    created(){
        
    }
})
</script>


<style scoped>
    a{
        text-decoration: none;
    }
    .menu_box{
        position: fixed;
        bottom: 0;
        height: 46px;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
    }
    .menu_box_item{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .img{
        display: flex;
        justify-content: center;
    }
    .img img{
        width: 26px;
        height: 26px;
    }
    .text{
        font-size: 11px;
        color: #11b57c;
        text-align: center;
    }
    .carNum{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: red;
        position: absolute;
        right: 31%;
        top: -13%;
        color: white;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
    }
</style>